<template>
  <div class="left">
    <div class="title bg1"></div>
    <div class="box1">
      <div class="item_mtitle">
        <img src="@/assets/images/Group15.png" alt="" />
        <span class="text-c9-55-16">学校数量</span>
      </div>
      <div class="box1_content">
        <AreaPie />
      </div>
    </div>
    <!-- <div class="title bg2"></div> -->
    <div class="box2">
      <div class="item_mtitle">
        <img src="@/assets/images/Group15.png" alt="" />
        <span class="text-c9-55-16">办学条件</span>
      </div>
      <!-- 标题 -->
      <div class="box2_title">
        <div class="text-gradual-blue-16 ched">财务管理</div>
      </div>

      <div class="box2_box" @click="visible4 = true">
        <div class="box2_box_a">地方经费投入(亿)</div>
        <div class="box2_box_b">1413.72</div>
        <div class="box2_box_c">目标(2023):1413.72</div>
        <img src="@/assets/images/jt_r.png" alt="" />
      </div>

      <div class="box2_box" @click="visible1 = true">
        <div class="box2_box_a">一般公共经费</div>
        <div class="box2_box_b">855.61</div>
        <div class="box2_box_c">目标(2023):855.61</div>
        <img src="@/assets/images/jt_r.png" alt="" />
      </div>

      <div class="box2_box1">
        <div class="box2_box1_a">
          <div class="box2_box1_a_title">
            <span class="text-c9-75-12"
              >公办各学段生均一般公共预算教育经费</span
            >
            <img src="@/assets/images/jt_r.png" alt="" />
          </div>
          <div class="box2_box1_a_crossOneBar">
            <crossOneBar :data="barData" :xData="barXData"></crossOneBar>
          </div>
        </div>
        <div class="box2_box1_b">
          <div class="box2_box1_b_item" @click="visible5 = true">
            <div class="box2_box1_b_item_c text-c9-75-14">
              山东援助重庆教师培训
            </div>
            <div class="box2_box1_b_item_c">
              <span class="text-gray-18"
                >250 <span class="text-c9-55-12">个</span></span
              >
              <img src="@/assets/images/jt_r.png" alt="" />
            </div>
          </div>
          <div class="kpi_line"></div>
          <div class="box2_box1_b_item" @click="visible2 = true">
            <div class="box2_box1_b_item_c text-c9-75-14">
              委属公务用车购置事项
            </div>
            <div class="box2_box1_b_item_c">
              <span class="text-gray-18"
                >19 <span class="text-c9-55-12">个</span></span
              >
              <img src="@/assets/images/jt_r.png" alt="" />
            </div>
          </div>
          <div class="kpi_line"></div>
          <div class="box2_box1_b_item" @click="visible3 = true">
            <div class="box2_box1_b_item_c text-c9-75-14">
              市教委国有资产租借备案
            </div>
            <div class="box2_box1_b_item_c">
              <span class="text-gray-18"
                >19 <span class="text-c9-55-12">个</span></span
              >
              <img src="@/assets/images/jt_r.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="box2_title">
        <div class="text-gradual-blue-16 ched">基建后勤</div>
      </div>
      <div class="box2_box2">
        <div class="box2_box2_item">
          <span class="text-c9-75-14">全市高校在校生人数与学生宿舍床位数</span>
          <img src="@/assets/images/jt_r.png" alt="" />
        </div>
        <div class="box2_box2_item">
          <div class="box2_box2_item_c">
            <div class="jz text-c9-65-12">
              <img src="@/assets/images/box2_box2_item_cimg.png" alt="" />
              在校生数 (人)
            </div>
            <span class="text-gray-18">1230160</span>
          </div>
          <div class="kpi_line1"></div>
          <div class="box2_box2_item_c">
            <div class="jz text-c9-65-12">
              <img src="@/assets/images/box2_box2_item_cimg1.png" alt="" />
              宿舍床位数 (个)
            </div>
            <span class="text-gray-18">1542776</span>
          </div>
        </div>
      </div>

      <div class="box2_box3">
        <div class="box2_box3_title">
          <span class="text-c9-75-14">全市各学段生均校舍面积</span>
          <img src="@/assets/images/jt_r.png" alt="" />
        </div>
        <div class="box2_box3_bar">
          <Bar1 :data="tsxxData2" :data1="rxlData" y-unit="%"></Bar1>
        </div>
      </div>
    </div>

    <TwoListDialog
      :visible="visible1"
      title="一般公共经费"
      :thead="['区县', '一般公共经费（亿元）']"
      :data="data1"
      @close="visible1 = false"
    >
    </TwoListDialog>

    <TwoListDialog
      :visible="visible2"
      title="审批委属预算单位公务用车购置事项"
      :thead="['单位名称', '数量（个）']"
      :data="data2"
      @close="visible2 = false"
    >
    </TwoListDialog>

    <BarDialog
      :visible="visible3"
      title="开展市教委所属预算单位国有资产出租出借备案"
      :data="gyzcData"
      :xData="gyzcXData"
      :dialogStyle="{
        'background-image': `url(${ewDialogBg})`,
      }"
      @close="visible3 = false"
    ></BarDialog>

    <DfjjDialog
      :visible="visible4"
      title="地方教育经费总投入"
      :thead="['区县', '教育经费投入（亿元）']"
      :data="data1"
      @close="visible4 = false"
    >
    </DfjjDialog>

    <YzcqDialog
      :visible="visible5"
      title="协调山东省级财资金政援助重庆教师培训"
      @close="visible5 = false"
    ></YzcqDialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import AreaPie from "./components/areaPie.vue";
import Bar1 from "./components/barEnrollmentRate.vue";
import crossOneBar from "./components/crossOneBar.vue";
import TwoListDialog from "./components/twoListDialog.vue";
import BarDialog from "./components/barDialog.vue";
import ewDialogBg from "../../../assets/images/ewDialogBg.png";
import DfjjDialog from "./components/dfjjDialog.vue";
import YzcqDialog from "./components/yzcqDialog.vue";

const tsxxData2 = [10.64, 11.3, 13.56, 25.77, 17.03, 22.09, 28.07];
const rxlData = ["学前教育", "小学", "初中", "高中", "中职", "高职", "本科"];
const barXData = [
  "幼儿园",
  "普通小学",
  "普通初中",
  "普通高中",
  "中等职业学校",
  "普通高职高专学校",
  "普通高等学校",
];
const barData = [
  7886.94, 14473.44, 18583.76, 17078.25, 14878.25, 15854.12, 17665.54,
];

const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);

const data1 = [
  { name: "重庆市本级", value: 1891 },
  { name: "万州区", value: 1196 },
  { name: "涪陵区", value: 408 },
  { name: "渝中区", value: 358 },
  { name: "大渡口区", value: 336 },
  { name: "开州区", value: 203 },
  { name: "江北区", value: 142 },
  { name: "沙坪坝区", value: 130 },
  { name: "九龙坡区", value: 123 },
  { name: "南岸区", value: 105 },
  { name: "北碚区", value: 104 },
  { name: "綦江区", value: 102 },
  { name: "大足区", value: 104 },
];

const data2 = [
  { name: "重庆工商大学", value: 2 },
  { name: "四川美术学院", value: 1 },
  { name: "四川外国语大学", value: 1 },
  { name: "重庆中医院学院", value: 1 },
  { name: "重庆开放大学 重庆工商职业学院", value: 2 },
  { name: "重庆三峡职业学院", value: 1 },
  { name: "重庆城市管理职业学院", value: 1 },
  { name: "重庆城市职业学院", value: 1 },
  { name: "重庆工程职业技术学院", value: 1 },
  { name: "重庆工程职业技术学院", value: 1 },
  { name: "重庆化工职业学院", value: 1 },
  { name: "重庆市教育信息技术与装备中心", value: 1 },
  { name: "重庆市教育科学研究院", value: 1 },
];

const gyzcXData = [
  "重庆文理学院",
  "重庆文理学院",
  "重庆工商大学",
  "重庆工商大学",
  "重庆城市职业学院",
  "重庆城市职业学院",
  "重庆工业职业技术学院",
  "重庆工业职业技术学院",
  "重庆市教育信息技术与装备中心",
  "重庆市教育信息技术与装备中心",
  "重庆交通大学",
];
const gyzcData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
</script>

<style lang="less" scoped>
.jz {
  display: flex;
  align-items: center;
}
.kpi_line {
  width: 100%;
  border: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 178, 238, 0),
      rgba(0, 178, 238, 0.7),
      rgba(0, 178, 238, 0)
    )
    1 1;
}
.kpi_line1 {
  height: 1.875rem;
  border: 1px solid;
  border-image: linear-gradient(
      rgba(0, 178, 238, 0),
      rgba(0, 178, 238, 0.5),
      rgba(0, 178, 238, 0)
    )
    1 1;
}
.item_mtitle {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    // margin-left: 12px;
    margin-right: 8px;
  }
}
.left {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 2.75rem;
  }
  .bg1 {
    background: url(../../../assets/images/title1.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url(../../../assets/images/title2.png) no-repeat;
    background-size: 100% 100%;
  }

  .box1 {
    width: 100%;
    height: 276px;
    display: flex;
    flex-direction: column;
    // gap: 0.5rem;
    padding: 0 0.5rem;
    margin-top: 8px;
    margin-bottom: 8px;
    background: rgba(9, 54, 100, 0.3);
    .box1_content {
      width: 100%;
      flex: 1;
      // border: 1px red solid;
    }
  }

  .box2 {
    flex: 1;
    height: 100%;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    // gap: 0.5rem;
    background: rgba(9, 54, 100, 0.3);
    .box2_title {
      width: 100%;
      height: 32px;
      background: url(@/assets/images/left_box2bg.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .box2_box {
      width: 100%;
      height: 30px;

      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // background: linear-gradient( 90deg, #1E375C 0%, rgba(17,61,88,0) 100%);
      background: url(@/assets/images/box_c_bg.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      .box2_box_a {
        width: 35%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 14px;
        color: #c9e9f8;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        padding: 0 0 0 12px;
      }
      .box2_box_b {
        width: 25%;
        height: 100%;
        font-family: Helvetica, Helvetica;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
        text-align: right;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
      }
      .box2_box_c {
        width: 35%;
        height: 100%;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 12px;
        color: rgba(201, 233, 248, 0.8);
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
      }
      img {
        width: 16px;
        height: 14px;
      }
    }
    .box2_box1 {
      width: 100%;
      height: 182px;
      margin-top: 8px;
      margin-bottom: 8px;
      display: flex;
      gap: 8px;
      .box2_box1_a {
        width: 61.3%;
        height: 100%;
        // border: 1px gold solid;
        background: rgba(9, 54, 100, 0.3);
        .box2_box1_a_title {
          width: 100%;
          height: 30px;
          // border: 1px red solid;
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 16px;
            height: 14px;
          }
        }
        .box2_box1_a_crossOneBar {
          width: 100%;
          height: 150px;
        }
      }
      .box2_box1_b {
        width: 38.7%;
        height: 100%;
        // border: 1px gold solid;
        background: rgba(9, 54, 100, 0.3);
        .box2_box1_b_item {
          width: 100%;
          height: 33.3%;
          cursor: pointer;
          .box2_box1_b_item_c {
            width: 100%;
            height: 50%;

            padding: 0 0 0 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 16px;
              height: 14px;
            }
          }
        }
      }
    }
    .box2_box2 {
      width: 100%;
      height: 70px;

      margin-top: 8px;
      margin-bottom: 8px;
      .box2_box2_item {
        width: 100%;
        height: 50%;

        display: flex;
        justify-content: space-between;
        align-items: center;
        .box2_box2_item_c {
          width: 48%;
          height: 100%;

          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .box2_box3 {
      width: 100%;
      flex: 1;

      .box2_box3_title {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 16px;
          height: 14px;
        }
      }
      .box2_box3_bar {
        width: 100%;
        height: 150px;
      }
    }
  }
}
.ched {
  position: relative;
}
.ched::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #ffc421;
  position: absolute;
  left: -8px;
  top: 46%;
}
.ched::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: #ffc421;
  position: absolute;
  right: -8px;
  top: 46%;
}
</style>
